<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .preview_img{
        width: 400px;
        height: 400px;
    }
    .mask{
        width: 300px;
        height: 300px;
        background: tomato;
        opacity: .5;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        cursor: move;
    }
    .big{
        width: 500px;
        height: 500px;
        position: absolute;
        left: 500px;
        top: 0;
        background: #84ff9d;
        display: none;
        z-index: 100;
    }
    .big img{
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
<body>
<div class="preview_img">
    <img src="../images/img1.jpg" alt="" class="" style="width: 100%;height: 100%;">
    <div class="mask"></div>
    <div class="big">
        <img src="../images/img1.jpg" alt="" class="bigImg">
    </div>
</div>
<script>
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    preview_img.addEventListener('mouseover',function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    preview_img.addEventListener('mouseout',function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
    preview_img.addEventListener('mousemove',function (e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        var bigImg = document.querySelector('.bigImg');
        var bigMax = bigImg.offsetWidth - big.offsetWidth;
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
</script>
</body>
</html>